<template>
  <div class="contain">
    <!-- 搜索 -->
    <el-form :model="query" ref="queryForm" :inline="true" class="top-search" label-position="left">
      <el-form-item label="关键词" prop="keywords">
        <el-input v-model="query.keywords" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label=" ">
        <el-button type="primary" @click="getList()">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 操作菜单 -->
    <div class="mid-action">
      <div>
        <el-button type="primary" size="mini" @click="creatItem('creat')">添加</el-button>
      </div>
    </div>
    <!-- 表格列表 -->
    <el-table v-loading="loading" :data="list">
      <el-table-column label="logo" align="center" prop="companyLogo" width="140px">
        <template slot-scope="scope">
          <el-image :src="scope.row.companyLogo" fit="cover" style="width:80px;height:80px;"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="统一社会信用代码" align="center" prop="socialCreditCode"></el-table-column>
      <el-table-column label="公司名" align="center" prop="companyName"></el-table-column>
      <el-table-column label="企业类型" align="center" prop="enterpriseType"></el-table-column>
      <el-table-column label="行业" align="center" prop="industryInvolved"></el-table-column>
      <el-table-column label="注册资金" align="center" prop="registerCapital"></el-table-column>
      <!-- <el-table-column label="企业地址" align="center" prop="businessAddress"></el-table-column> -->
      <el-table-column label="所属城市" align="center" prop="city"></el-table-column>
      <el-table-column label="法人" align="center" prop="legalPerson"></el-table-column>
      <el-table-column label="联系电话" align="center" prop="phone"></el-table-column>
      <el-table-column label="绑定园区ID" align="center" prop="gardenId"></el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="creatItem('edit', scope.row)">编辑</el-button>
          <!-- <el-button v-hasPermi="['enterpriseWechat:edit']" size="mini" type="text" @click="deleteItem(scope.row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="query.pageNum"
      :limit.sync="query.pageSize"
      @pagination="getList()"
    />
    <!-- 编辑表单 -->
    <el-dialog :title="formTtile == 'creat' ? '添加' : '编辑'" :visible.sync="editFormShow">
      <el-form class="edit_form" :model="form" ref="form" label-width="100px" label-position="right">
        <el-form-item label="公司名称" prop="companyName">
            <el-input class="input" v-model="form.companyName" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="英文名" prop="englishName">
            <el-input class="input" v-model="form.englishName" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="统一社会信用代码" prop="socialCreditCode">
            <el-input class="input" v-model="form.socialCreditCode" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="纳税人识别号" prop="taxpayer">
            <el-input class="input" v-model="form.taxpayer" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="组织机构代码" prop="institutionalFrameworkCode">
            <el-input class="input" v-model="form.institutionalFrameworkCode" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="法定代表人" prop="legalPerson">
            <el-input class="input" v-model="form.legalPerson" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="经营范围" prop="manageScope">
            <el-input class="input" type="textarea" v-model="form.manageScope" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="公司logo" prop="companyLogo">
            <el-upload
                class="avatar-uploader"
                :action="uploadUrl"
                :headers="uploadFileHeader"
                :show-file-list="false"
                :on-success="houseImgUpload">
                <img v-if="form.companyLogo" :src="form.companyLogo" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="最新年报地址" prop="annalsSite">
            <el-input class="input" type="textarea" v-model="form.annalsSite" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="核准日期" prop="auditTime">
            <el-date-picker v-model="form.auditTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"></el-date-picker>
        </el-form-item>
        <el-form-item label="省市区" prop="province">
            <el-cascader size="large" :options="regionOptions" v-model="regionSelectedOptions" @change="regionSelectedChange"> </el-cascader>
        </el-form-item>
        <el-form-item label="企业地址" prop="businessAddress">
            <el-input class="input" type="textarea" v-model="form.businessAddress" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="企业类型" prop="enterpriseType">
            <el-select v-model="form.enterpriseType" placeholder="请选择">
                <el-option value="有限责任公司（自然人投资或控股）"></el-option>
                <el-option value="股份有限公司"></el-option>
                <el-option value="私营企业"></el-option>
                <el-option value="联营企业"></el-option>
                <el-option value="股份合作企业"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="登记状态" prop="register">
            <el-select v-model="form.register" placeholder="请选择">
                <el-option v-for="(item,index) in registerArr" :key="index" :value="item"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="注册资本" prop="registerCapital">
            <el-input class="input" v-model="form.registerCapital" placeholder="请输入" clearable  /> 万元
        </el-form-item>
        <el-form-item label="注册号" prop="signInCode">
            <el-input class="input" v-model="form.signInCode" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="成立日期" prop="establishTime">
            <el-date-picker v-model="form.establishTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"></el-date-picker>
        </el-form-item>
        <el-form-item label="所属行业" prop="industryInvolved">
            <el-select v-model="form.industryInvolved" placeholder="请选择">
                <el-option v-for="(item,index) in industryInvolvedArr" :key="index" :value="item"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="参保人数" prop="insured">
            <el-input-number v-model="form.insured" :min="0" :maxlength="100000" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="邮箱" prop="mailbox">
            <el-input class="input" v-model="form.mailbox" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="更多邮箱" prop="moreMailbox">
            <el-input class="input" type="textarea" v-model="form.moreMailbox" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
            <el-input class="input" v-model="form.phone" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="更多电话" prop="morePhone">
            <el-input class="input" type="textarea" v-model="form.morePhone" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="曾用名" prop="onceName">
            <el-input class="input" v-model="form.onceName" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="网址" prop="website">
            <el-input class="input" v-model="form.website" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="绑定园区" prop="gardenId">
            <el-select v-model="form.gardenId" placeholder="请选择">
                <el-option v-for="(item,index) in parkList" :key="index" :value="item.id" :label="item.gardenName"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getQccCompanyList, creatQccCompany, updateQccCompany, getParkList } from "@/api/eh-api";
import { getToken } from "@/utils/auth";
import { regionData, CodeToText, TextToCode } from 'element-china-area-data' //省市区
export default {
  data() {
    return {
        uploadUrl:'',
        // 遮罩层
        loading: false,
        // 总条数
        total: 0,
        // 查询参数
        query: {
            pageNum: 1,
            pageSize: 10,
            keywords: undefined,
        },
        list:[],
        parkList:[],
        editFormShow:false,
        formTtile:'creat',
        form:{
            "annalsSite": "",
            "auditTime": "",
            "businessAddress": "",
            "city": "",
            "companyLogo": "",
            "companyName": "",
            "createTime": "",
            "delFlag": "",
            "district": "",
            "englishName": "",
            "enterpriseType": "",
            "establishTime": "",
            "gardenId": 0,
            "id": 0,
            "industryInvolved": "",
            "institutionalFrameworkCode": "",
            "insured": "",
            "legalPerson": "",
            "mailbox": "",
            "manageScope": "",
            "moreMailbox": "",
            "morePhone": "",
            "onceName": "",
            "phone": "",
            "province": "",
            "register": "",
            "registerCapital": "",
            "sign": "",
            "signInCode": "",
            "socialCreditCode": "",
            "taxpayer": "",
            "updateTime": "",
            "website": ""
        },
        //省市区
        regionOptions: regionData,
        regionSelectedOptions: [],
        //select数组集合
        industryInvolvedArr:['农、林、牧、渔业', '采矿业', '制造业', '电力、燃气及水的生产和供应业', '建筑业', '交通运输、仓储和邮政业', '信息传输、计算机服务和软件业', '批发和零售业', '住宿和餐饮业', '金融业', '房地产业', '租赁和商务服务业', '科学研究、技术服务和地质勘查业', '水利、环境和公共设施管理业', '居民服务和其他服务业'],
        registerArr:['存续','在业','吊销','注销','迁入','迁出','停业','清算'],
    };
  },
  created() {
        //图片上传公共参数
        this.uploadUrl = process.env.VUE_APP_BASE_API + '/wx/appletFeedback/uploadimg'
        this.uploadFile = process.env.VUE_APP_BASE_API + '/common/uploadFile2Cos'
        this.uploadFileHeader = {Authorization : "Bearer " + getToken()}

        this.getList()
        this.getParkList()
  },
  methods: {
    /**
     * 接口 - 获取列表
     */
    getList() {
      this.loading = true;
      getQccCompanyList(this.query)
        .then(({ rows, total }) => {
          this.list = rows;
          this.total = parseInt(total);
          this.loading = false;
          this.ids = [];
        })
        .catch(() => {
          this.loading = false;
        });
    },

    /**
     * 接口 - 获取园区列表
     */
    getParkList() {
      getParkList()
        .then(({ rows, total }) => {
          this.parkList = rows
        })
    },

    /**
     * 上传logo
     */
    houseImgUpload:function(res){
      this.form.companyLogo = res.data.url
    },

    /**
     * 事件 - 省市区选择
     */
    regionSelectedChange:function(value){
        // console.log('省市区', CodeToText[value[2]])
        this.form.province = CodeToText[value[0]]
        this.form.city = CodeToText[value[1]]
        this.form.district = CodeToText[value[2]]
    },

    /**
     * 添加
     */
    creatItem:function(title,item) {
      this.formTtile = title
      this.editFormShow = true
      if( title == 'edit' ){ //编辑
        for( let i in item){
            this.form[i] = item[i]
        }
        this.regionSelectedOptions = [
            ...[TextToCode[item.province].code],
            ...[TextToCode[item.province][item.city].code],
            ...[TextToCode[item.province][item.city][item.district].code]
        ]
      }else{
        let form = this.form
        Object.keys(this.form).forEach( key => {
          form[key] = ''
        })
        this.form = form
      }
    },

    /**
     * 提交表单
     */
    submit:function(params) {
        console.log( this.form )
        if( this.formTtile == 'creat' ){
          creatQccCompany(this.form).then( res => {
            if( res.code == 200 ){
              this.$message({
                message: '添加成功',
                type: 'success'
              });
              this.getList();
            }else{
              this.$message.error(res.msg);
            }
          })
        }else{
          updateQccCompany(this.form).then( res => {
              if( res.code == 200 ){
                this.$message({
                  message: '编辑成功',
                  type: 'success'
                });
                this.getList();
              }else{
                this.$message.error(res.msg);
              }
            })
        }
        this.editFormShow = false
    },

    /**
     * 删除 - 暂不用
     */
    deleteItem:function(rows) {
        console.log(rows)

    },

  },
};
</script>

<style lang="scss" scoped>
.mid-action {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  align-items: center;
  .total {
    background-color: rgba(65, 133, 244, 0.1);
    border: 1px solid rgba(65, 133, 244, 0.2);
    border-radius: 3px;
    font-size: 14px;
    min-height: 32px;
    line-height: 32px;
    padding: 0 12px;
    color: #606266;
  }
  .num {
    color: #00f;
  }
}
.thumbnail {
  width: 160px;
  height: 80px;
}
.input{
  width: 80%;
}

/**头像 */
.avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader /deep/.el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 128px;
    height: 128px;
    line-height: 128px;
    text-align: center;
}
.avatar {
    width: 128px;
    height: 128px;
    display: block;
}
</style>
